<template>
  <div ref="Ukiyoe" style="width:100%;height:100%;" />
</template>

<script>
import * as echarts from 'echarts'
import 'echarts-liquidfill'
export default {
  data() {
    return {
      endId: ''
    }
  },
  watch: {
    endId(newvalue, oldvalue) {
      clearInterval(oldvalue)
      return newvalue
    }
  },
  mounted() {
    var myChart = echarts.init(this.$refs.Ukiyoe)
    var option
    var waves = [{
      value: 0.4,
      valueSine: 0.1,
      period: 5000,
      amplitude: 120,
      amplitudeSine: 100,
      waveLength: '80%'
    }, {
      value: 0.42,
      valueSine: 0.05,
      period: 4000,
      amplitude: 100,
      amplitudeSine: 10,
      waveLength: '40%'
    }, {
      value: 0.4,
      valueSine: 0.05,
      period: 1500,
      amplitude: 50,
      amplitudeSine: 10,
      waveLength: '20%'
    }, {
      value: 0.4,
      valueSine: 0.05,
      period: 3000,
      amplitude: 70,
      amplitudeSine: 10,
      waveLength: '60%'
    }, {
      value: 0.35,
      valueSine: 0.05,
      period: 2000,
      amplitude: 60,
      amplitudeSine: 10,
      waveLength: '40%'
    }, {
      value: 0.3,
      valueSine: 0.05,
      period: 4000,
      amplitude: 15,
      amplitudeSine: 10,
      waveLength: '20%'
    }, {
      value: 0.3,
      valueSine: 0.05,
      period: 1500,
      amplitude: 60,
      amplitudeSine: 10,
      waveLength: '30%'
    }]

    var data = []
    var phases = [0, 0.6, 0.8]
    var values = [1, 0.9, 0.85]
    for (var w = 0; w < waves.length; ++w) {
      for (var i = 0; i < 3; ++i) {
        data.push({
          value: waves[w].value * values[i],
          amplitude: waves[w].amplitude,
          phase: phases[i] + w,
          period: waves[w].period,
          waveLength: waves[w].waveLength
        })
      }
    }

    option = {
      backgroundColor: new echarts.graphic.LinearGradient(
        0, 0, 0, 1, [{
          offset: 0,
          color: '#BBFFFF'
        }, {
          offset: 0.4,
          color: '#D9FFFF'
        }, {
          offset: 1,
          color: '#FDFFFF'
        }]
      ),
      series: [{
        radius: '80%',
        color: ['#FFBFFF', '#FF95CA', '#FFC1E0'],
        type: 'liquidFill',
        shape: 'rect',
        data: data,
        animationDurationUpdate: 2000,
        animationEasingUpdate: 'cubicInOut',
        backgroundStyle: {
          color: 'transparent'
        },
        outline: {
          show: false
        },
        label: {
          normal: {
            textStyle: {
              color: '#282536',
              fontSize: 100
            },
            formatter: function() {
              return ''
            }
          }
        }
      }],
      grid: { show: 'true', borderWidth: '0' }
    }

    var start = new Date()
    option && myChart.setOption(option)
    this.endId = setInterval(function() {
      var now = new Date()
      var dt = (now - start)
      //   var max = [0.5, 0.47, 0.44]

      for (var w = 0; w < 1; ++w) {
        for (var i = 0; i < 10; ++i) {
          data[w *10 + i].amplitude = waves[w].amplitude +
                waves[w].amplitudeSine * Math.sin(dt)
          data[w * 10 + i].value = waves[w].value +
                waves[w].valueSine * Math.sin(dt) * values[i]
        }
      }
      myChart.setOption({
        series: [{
          data: data
        }]
      })
    }, 2000)
  },
  beforeDestroy() {
    clearInterval(this.endId)
  }
}
</script>

<style>

</style>
